<template>
	<view class="flex flex-col flex-col-top-center" style="height: 75px">
		<tm-sheet
			:height="60"
			:width="_width"
			:round="24"
			unit="px"
			_class="flex-center flex "
			parenClass="relative"
			class="relative"
			:_style="_styletop"
			:followTheme="_btnTop && props.followTheme"
			:transprent="_transprent"
			:color="props.color"
			:margin="[0, 0]"
			:padding="_padding"
			:shadow="props.shadow"
			:outlined="props.outlined"
			:border="props.border"
			:borderStyle="props.borderStyle"
			:borderDirection="props.borderDirection"
			:linear="props.linear"
			:linearDeep="props.linearDeep"
			@click="itemClick"
		>
			<tm-badge
				:fontSize="20"
				:color="c_font_style.dotColor"
				:eventPenetrationEnabled="true"
				:dot="props.dot"
				:count="props.count"
				:icon="props.dotIcon"
				:maxCount="props.maxCount"
			>
				<view :class="[_active ? 'anifun' : '']" class="flex flex-col flex-col-center-center" :style="{ width: 65 + 'px', height: '30px' }">
					<slot>
						<tm-icon
							:customicon="props.customicon"
							v-if="!_load"
							_style="line-height: 0px;"
							:color="_color"
							:font-size="c_font_style.iconSize"
							:name="_active ? c_font_style.icon : c_font_style.unicon || c_font_style.icon"
						></tm-icon>
					</slot>
					<tm-icon
						v-if="_load"
						spin
						_style="line-height: 0px;"
						:color="_color"
						:font-size="c_font_style.iconSize"
						name="tmicon-shuaxin"
					></tm-icon>
				</view>
			</tm-badge>
			<tm-text
				v-if="c_font_style.text !== ''"
				:color="_color"
				_class="pb-0"
				:font-size="c_font_style.textSize"
				:label="c_font_style.text"
			></tm-text>
		</tm-sheet>
	</view>
</template>

<script lang="ts" setup>
/**
 * 底部导航栏项目
 * @description 只能放置在tm-tabbar中。
 */
import tmBadge from '../tm-badge/tm-badge.vue'
import tmText from '../tm-text/tm-text.vue'
import tmIcon from '../tm-icon/tm-icon.vue'
import tmSheet from '../tm-sheet/tm-sheet.vue'
import { custom_props } from '../../tool/lib/minxs'
import { useTmpiniaStore } from '../../tool/lib/tmpinia'
import {
	getCurrentInstance,
	computed,
	watchEffect,
	ref,
	provide,
	inject,
	onUpdated,
	onMounted,
	onUnmounted,
	nextTick,
	watch,
	PropType,
	ComponentInternalInstance
} from 'vue'
const store = useTmpiniaStore()
/**
 * click 项目被点击时触发。
 * beforeClick点击切换之前执行，如果返回false或者Promise<false>时，将阻止链接的切换。如果没有提供url链接地地址将只作为切换使用。
 */
const emits = defineEmits(['click', 'beforeClick'])
const proxy = getCurrentInstance()?.proxy ?? null
const props = defineProps({
	...custom_props,
	followTheme: {
		type: [Boolean, String],
		default: true
	},
	transprent: {
		type: Boolean,
		default: true
	},
	//背景主题色
	color: {
		type: String,
		default: 'white'
	},
	//默认的文字主题
	fontColor: {
		type: String,
		default: 'grey-darken-1'
	},
	linear: {
		type: String,
		default: ''
	},
	//激活后的主题色。
	activeColor: {
		type: String,
		default: 'primary'
	},
	//当前是否是活动项。
	active: {
		type: Boolean,
		default: false
	},
	//是否开启向上凸起的按钮。
	btnTop: {
		type: Boolean,
		default: false
	},
	text: {
		type: String,
		default: ''
	},
	icon: {
		type: String,
		default: ''
	},
	//未选中时的图标，如果不填写默认使用相同的图标。
	unicon: {
		type: String,
		default: ''
	},
	textSize: {
		type: Number,
		default: 20
	},
	iconSize: {
		type: Number,
		default: 38
	},
	dot: {
		type: [Boolean],
		default: false
	},
	dotColor: {
		type: [String],
		default: 'red'
	},
	dotIcon: {
		type: [String],
		default: ''
	},
	//如果count为数字时，显示数字角标，如果为string是显示文本角标。
	count: {
		type: [Number, String],
		default: 0
	},
	maxCount: {
		type: [Number],
		default: 99
	},
	url: {
		type: [String],
		default: ''
	},
	//链接打开方式同官方。
	openType: {
		type: String as PropType<'navigate' | 'redirect' | 'switchTab' | 'reLaunch' | 'navigateBack'>,
		default: 'navigate'
	},
	//打开链接之前执行的勾子函数，返回fase阻止打开。也可以返回new Promise.
	beforeClick: {
		type: [Function, Boolean],
		default: () => false
	},
	load: {
		type: [Boolean, String],
		default: false
	},
	//自定项目数据，在执行beforeClick时，会返回给函数内部
	data: {
		type: [Object, String, Number],
		default: () => undefined
	},
	/**是否禁用选项. */
	disabled: {
		type: Boolean,
		default: false
	},
	/**
	 * 为了提高响应速度，只有开启了自定图标显示功能才会去解析用户自定义图标规则名称
	 */
	customicon: {
		type: Boolean,
		default: false
	}
})
const _btnTop = computed(() => props.btnTop)
const _transprent = computed(() => {
	if (_btnTop.value === true) return false
	return true
})
const _styletop = computed(() => {
	if (_btnTop.value !== true) return 'top:15px'
	return 'top:0px'
})

const _padding = computed(() => {
	return [0, 0]
})
const _disabled = computed(() => props.disabled)
const _load = ref(props.load)
const _active = ref(false)
const c_font_style = computed(() => {
	return {
		dotColor: props.dotColor,
		text: props.text,
		icon: props.icon,
		textSize: props.textSize,
		iconSize: props.iconSize,
		unicon: props.unicon
	}
})
const uid = uni.$tm.u.getUid(1)
const tmTabbarWidth = inject(
	'tmTabbarWidth',
	computed(() => 50)
)
const _width = computed(() => {
	if (_btnTop.value === true) return 60
	return tmTabbarWidth.value
})
const nowUrl = inject(
	'tmTabbarUrl',
	computed(() => '')
)
const tmTabbarItemList = inject(
	'tmTabbarItemList',
	computed<Array<string | number>>(() => [])
)
const nowUid = inject(
	'tmTabbarUid',
	computed<string | number>(() => '')
)
const tmTabbarItemSafe = inject('tmTabbarItemSafe', false)
const tmTabbarItemActive = inject(
	'tmTabbarItemActive',
	computed(() => -1)
)
const tmTabbarItemAutoSelect = inject(
	'tmTabbarItemAutoSelect',
	computed(() => false)
)
const _color = computed(() => {
	if (_active.value === true && !_btnTop.value) {
		if (store.tmStore.color && props.followTheme) {
			return store.tmStore.color
		}
		return props.activeColor
	}
	return props.fontColor
})

//父级方法。
let parent: any = proxy?.$parent
while (parent) {
	if (parent?.tmTabbarId == 'tmTabbarId' || !parent) {
		break
	} else {
		parent = parent?.$parent ?? undefined
	}
}
if (parent) {
	parent.pushKey(uid)
}
onUnmounted(() => {
	if (parent) {
		parent.delKey(uid)
	}
})

if (tmTabbarItemAutoSelect.value) {
	_active.value = props.active || false
} else {
	if (tmTabbarItemList.value[tmTabbarItemActive.value] == uid) {
		_active.value = true
	} else {
		_active.value = false
	}
}
function setActive() {
	if (nowUid.value == uid) {
		_active.value = true
	} else {
		_active.value = false
	}
}

watch([nowUid, () => props.active], () => {
	if (tmTabbarItemAutoSelect.value) {
		setActive()
	}
})
watch(tmTabbarItemActive, () => {
	if (!tmTabbarItemAutoSelect.value) {
		// 非自动选中，通过父组件的active来选中当前。
		if (tmTabbarItemList.value[tmTabbarItemActive.value] == uid) {
			nextTick(() => {
				_active.value = true
			})
		} else {
			nextTick(() => {
				_active.value = false
			})
		}
	}
})
watch([() => props.load], () => {
	_load.value = props.load
})
async function itemClick() {
	if (_load.value || _disabled.value) return
	if (typeof props.beforeClick === 'function') {
		_load.value = true
		let p = await props.beforeClick(props.data)
		if (typeof p === 'function') {
			p = await p(props.data)
		}
		_load.value = false
		if (!p) return
	}

	emits('click')
	nextTick(() => {
		if (tmTabbarItemAutoSelect.value) {
			if (parent) {
				parent.setNowurl(props.url, uid)
			}
			setActive()
		}
		if (props.url == '') return
		uni.$tm.u.routerTo(props.url, props.openType)
	})
}
</script>

<style scoped>
/* #ifndef APP-NVUE */
.anifun {
	animation: scale 0.2s ease;
}

@keyframes scale {
	0% {
		transform: scale(0.9);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

/* #endif */
</style>
